<template>
  <el-card shadow="always">
    <div class="header" slot="header">
      <!-- <el-input class="header-input" v-model="headerSearch" size="small" placeholder="输入关键字搜索" /> -->
      <el-alert
        class="header-input"
        title="在此表格中可按住鼠标进行拖动排序"
        type="error"
        :closable="false"
        effect="dark"
      ></el-alert>
      <el-button size="small" type="primary" @click="$goback()">返回</el-button>
      <file-output class="output" :tableData="tableData" :headData="thirdValue" :title="firstValue" />
      <text-output class="output" :tags="easyHead" :tableData="tableData" :selectedTag="selectedTag" />
    </div>

    <!-- .filter(data => !headerSearch || JSON.stringify(data).includes(headerSearch)) -->
    <el-table :data="tableData" stripe style="width: 100%" :row-key="getRowKey" @sort-change="sortChange" ref="the_table" border>
      <el-table-column
        v-for="(item, index) in headList"
        :key="index"
        :prop="item.type"
        :min-width="item.width"
        :label="item.name"
        :sortable="item.sort"
      ></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
let BaaS = window.BaaS;

import Sortable from "sortablejs";
import fileOutput from "@/components/fileOutput";
import textOutput from "@/components/textOutput";
export default {
  //import引入的组件需要注入到对象中才能使用
  props: ["firstValue", "secondValue", "thirdValue", "fifthValue", "fourthValue", "_tabledata"],
  components: { textOutput, fileOutput },
  data() {
    return {
      // 搜索
      // headerSearch: "",
      // 主页传递的所有题目
      // headData: this.thirdValue,
      // 在表格页显示的题目
      headList: this.secondValue,

      // 穿梭框的选择数据
      // selectedHead: [],
      // 导出的表头
      // outputHead: [],

      // 表中选中的数据
      // selectedItem: [],
      // 合并排序后和选中后的数据
      // mergeData: [],
      // 导出的数据
      // outputData: [],
      // 选中的标签
      selectedTag: this.fifthValue,

      // 接收的表格数据
      tableData: JSON.parse(JSON.stringify(this._tabledata)),
      easyHead: this.fourthValue,
    };
  },
  //监听属性
  computed: {
    // 可以删掉
    // easyHead() {
    //   let easy = JSON.parse(JSON.stringify(this.headData));
    //   return easy.map((x) => {
    //     x.key = "${obj." + x.key + "}";
    //     return x;
    //   });
    // },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 手动点击排序
    sortChange() {
      this.tableData = JSON.parse(JSON.stringify(this.$refs.the_table.tableData));
    },

    // 表格拖拽排序
    drag() {
      const row = document.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
      Sortable.create(row, {
        disabled: false,
        animation: 400,
        forceFallback: true,
        // ghostClass: "drag-class",
        // 以后再写拖动样式，整个包裹
        onEnd: (e) => {
          let arr = this.tableData;
          arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]);
          this.$nextTick(function() {
            this.tableData = arr;
          });
        },
      });
    },
    // 必须指定唯一key
    getRowKey(row) {
      return row._id;
    },

    // 合并项的数据
    // lastItem(selected, tableData) {
    //   return tableData.filter(function (x) {
    //     return selected.indexOf(x) != -1;
    //   });
    // },
    // 拉起表格导出
    // outputByExcel() {
    //   this.dialogVisible1 = true;
    //   this.mergeData = this.lastItem(this.selectedItem, this.tableData);
    // },
    // 确定导出表头
    // selectedOutputHead(head, headData) {
    //   let arr = head.map((x) => {
    //     return x.split("_")[1] * 1 - 1;
    //   });
    //   arr.forEach((s, i) => {
    //     arr.splice(i, 1, headData[s].label);
    //   });
    //   return arr;
    // },
    // 根据表头导出想要的列
    // outputWantData(keys) {
    //   return this.mergeData.map((list) => {
    //     let arr = [];
    //     for (var key in list) {
    //       if (keys.indexOf(key) != -1) {
    //         arr.push(list[key]);
    //       }
    //     }
    //     return arr;
    //   });
    // },
    // 总执行按钮：表格导出确定
    // submitOutputFile() {
    //   this.dialogVisible1 = false;
    //   this.outputHead = this.selectedOutputHead(
    //     this.selectedHead,
    //     this.headData
    //   );
    //   this.outputData = this.outputWantData(this.selectedHead);
    //   this.xlsxToFile();
    // },
    // 通过XLSX写入
    // xlsxToFile() {
    //   let cell = [];
    //   cell.push(this.outputHead);
    //   let cells = cell.concat(this.outputData);
    //   let sheet = XLSX.utils.aoa_to_sheet(cells);
    //   let book = XLSX.utils.book_new();
    //   XLSX.utils.book_append_sheet(book, sheet, "论文");
    //   XLSX.writeFile(book, "论文导出.xlsx");
    // },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // bus on要在emit之前开启监听，且估计on是不能手动销毁，所以所有同名on都会监听一次，需要用off手动销毁
    // this.$bus.$off("tableData");
    // this.$bus.$on("tableData", (t) => {
    //   if (t) {
    //     this.tableData = t;
    //   }
    // });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.tableData.length) {
      this.drag();
    }
  },
  beforeRouteEnter(to, from, next) {
    if (!window.$login) {
      BaaS.auth
        .getCurrentUser()
        .then(() => {
          window.$login = true;
          next();
        })
        .catch(() => {
          next({ name: "login" });
        });
    } else {
      if (from.name == null) {
        next({ name: "table" });
      } else {
        next();
      }
    }
  },
};
</script>
<style lang="less" scoped>
.el-card {
  .header {
    text-align: right;
    .header-input {
      float: left;
      width: 260px;
    }
    .output {
      display: inline;
      margin-left: 10px;
    }
  }
}
.el-table {
  &::before {
    height: 0;
  }
}

// .drag-class {
//   background-color: red !important;
// }
</style>
